<template>
  <view class="order-detail">
    <view class="info-card">
      <!-- 头部 header -->
      <view class="info-header">
        <view>
          <view class="header-top">
            <!-- <u-tag text="代取团队" mode="plain" size="mini" /> -->
            <view class="team-name">{{ schoolTeam.teamName }}代取团队</view>
          </view>
          <view class="position">
            <image
              :src="require('@/static/orderDetail/location.png')"
              style="height: 15px; width: 15px; margin-right: 5px"
            />
            <view class="intro">{{ schoolTeam.teamAddress }}</view>
          </view>
        </view>

        <view>
          <image
            :src="require('@/static/orderDetail/mobile.png')"
            style="height: 30px; width: 30px; margin-right: 5px"
          />
          <image
            :src="require('@/static/orderDetail/navigation.png')"
            style="height: 30px; width: 30px"
          />
        </view>
      </view>

      <!-- 收货人收货地址 -->
      <view class="info-header" style="border-top: 1px solid #f6f6f6">
        <view>
          <view class="header-top">
            <view class="team-name">{{ userAddress.name }}</view>
            <view class="team-name">{{ userAddress.phone }}</view>
            <u-tag text="收货地址" mode="dark" type="success" size="mini" />
          </view>
          <view class="position">
            <image
              :src="require('@/static/order/address.png')"
              style="height: 15px; width: 15px; margin-right: 5px"
            />
            <view class="intro">{{ userAddress.address }}</view>
          </view>
        </view>
      </view>

      <view class="info-content">
        <!-- 订单详情 -->
        <view class="box-info" v-for="item in orderList" :key="item">
          <view>
            <view class="kuaidi-name">{{ item.site }}</view>
            <view class="kuaidi-type">{{ item.price }}/{{ item.no }}</view>
          </view>
          <view>
            <view>x1</view>
            <view>￥{{ item.truePrice }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="pay-method">
      <!-- 微信支付 -->
      <view
        v-for="(item, index) in paymethod"
        :key="index"
        class="pay-display"
        @click="changePayMethod(item)"
      >
        <view>
          <view :class="['custom-icon', item.class]"></view>
          <view>{{ item.name }}</view>
        </view>
        <view>
          <view
            class="custom-icon-gou custom-icon order-gou"
            v-if="item.choosePaythod == choosePaythod"
          ></view>
        </view>
      </view>

      <!-- <view
        class="custom-icon custom-icon-umidd17 alipay"
        @click="$u.debounce(alipay, 500)"
      >
        支付宝
      </view>
      <view
        class="custom-icon custom-icon-weixinzhifu1 wxpay"
        @click="$u.debounce(wxpay, 500)"
      >
        微信支付</view
      > -->
    </view>

    <view class="pay-prompt">点击图标选择好支付方式，点击支付即可去支付</view>

    <u-button
      :custom-style="customStyle"
      @click="$u.debounce(choosePaythod == 1 ? wxpay : alipay, 500)"
    >
      {{ choosePaythod == 1 ? "微信支付" : "支付宝支付" }}
      ￥{{ truePrice }}
    </u-button>
  </view>
</template>

<script>

export default {
  data() {
    return {
      schoolId: 0,
      // 校园团队信息
      schoolTeam: {
        teamName: "",
        teamAddress: "",
      },
      customStyle: {
        marginTop: "20px", // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        backgroundColor: "#adb838",
        color: "#FFFFFF",
      },
      //个人收货信息
      userAddress: {
        phone: "",
        address: "",
        name: "",
      },
      truePrice: 0, //总价格
      orderList: [],
      choosePaythod: 1, //1 微信支付  2 支付宝
      paymethod: [
        {
          class: "custom-icon-weixinzhifu1 wxpay",
          name: "微信支付",
          choosePaythod: 1,
        },
        {
          class: "custom-icon-umidd17 alipay",
          name: "支付宝",
          choosePaythod: 2,
        },
      ],
    };
  },
  methods: {
    //   对用户的信息进行处理
    userAddressFormat() {
      this.userAddress.phone = this.vuex_orderInfo.address.addressPhone;
      this.userAddress.name = this.vuex_orderInfo.address.addressUserName;
      this.userAddress.address =
        this.vuex_orderInfo.address.elifeSchool.schoolName +
        "-" +
        this.vuex_orderInfo.address.elifeBuild.buildName +
        "-" +
        this.vuex_orderInfo.address.addressRoomId;
    },
    // 更换支付方式
    changePayMethod(Info) {
      this.choosePaythod = Info.choosePaythod;
    },
    // 支付宝支付
    alipay() {
      this.$u.api
        .getPayCodeApi({ ...this.vuex_orderInfo, payMethod: "alipay" })
        .then((res) => {
          this.$u.vuex("vuex_pay_info", res.data);
          this.$u.route({
            url: "pages/order/components/orderPay",
            // params:res.data
          });
        });
    },
    // 微信支付
    wxpay() {
      var _this = this;
      this.$u.api
        .wxPayApi({ ...this.vuex_orderInfo, payMethod: "wxpay" })
        .then((res1) => {
          //小程序发起微信支付
          uni.requestPayment({
            provider: "wxpay",
            timeStamp: res1.timeStamp,
            nonceStr: res1.nonceStr,
            package: res1.package,
            signType: "MD5",
            paySign: res1.paySign,
            success: function (res) {
              console.log("success:" + JSON.stringify(res));
              _this.$u.api
                .wxOrderCheckApi({ orderNum: res1.orderNum })
                .then((res) => {
                  if (res.data === true) {
                    uni.showToast({
                      title: "支付成功",
                      icon: "success",
                      duration: 2000,
                    });
                    // 跳转到订单页面
                    _this.$u.route({
                      type: "switchTab",
                      url: "pages/order/userOrder",
                    });
                  }
                });
            },
            fail: function (err) {
              console.log("fail:" + JSON.stringify(err));
            },
            complete: function () {},
          });
        });
    },
  },

  //这里需要获取 传过来的信息 订单信息
  onLoad(option) {
    console.log(this.vuex_orderInfo);

    // 通过传过来的订单信息处理数据
    this.vuex_orderInfo.orderList.forEach((v) => {
      this.vuex_priceList.forEach((pv) => {
        if (pv.boxPriceId === v.price_id) {
          v.price = pv.boxPriceName;
          this.truePrice += parseFloat(v.truePrice);
        }
      });
    });
    this.orderList = this.vuex_orderInfo.orderList;

    console.log(this.truePrice);

    this.userAddressFormat();
    this.vuex_AddressData.forEach((v) => {
      if (v.value === parseInt(option.schoolId)) {
        this.schoolTeam.teamName = v.label;
        this.schoolTeam.teamAddress = v.address;
      }
    });
  },
};
</script>

<style scoped lang ='less' >
.order-detail {
  width: 100v;
  min-height: 100vh;
  background-color: #eff5f7;
  padding: 10px;
  .info-card {
    background-color: #ffffff;
    padding: 10px 20px;
    .info-header {
      height: 65.5px;
      display: flex;
      /* margin: 0px 10px 10px 10px; */
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      /* border-bottom: 1px solid #f3f3f3; */
      & > view:nth-child(1) {
        display: flex;
        flex-direction: column;
        .header-top {
          display: flex;
          flex-direction: row;
        }
        .team-name {
          color: #5a5b5c;
          font-size: 16px;
          margin-right: 10rpx;
        }
        .position {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          margin-top: 10px;
        }
        .intro {
          color: #919293;
          font-size: 12px;
        }
      }
    }
    .info-content {
      margin-top: 10px;
      border-top: 1px solid #f6f6f6;
      .box-info {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 20px 0;
        .kuaidi-name {
          font-size: 16px;
          color: #5a5b5c;
          margin-bottom: 5px;
        }
        .kuaidi-type {
          color: #919293;
          font-size: 12px;
        }
        & > view:nth-child(2) {
          width: 130px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-direction: row;
          & > view:nth-child(1) {
            font-size: 14px;
            color: #5a5b5c;
          }
          & > view:nth-child(2) {
            font-weight: 700 !important;
            font-size: 14px;
            color: #5a5b5c;
          }
        }
      }
    }
  }
  .pay-prompt {
    color: #919293;
    font-size: 25rpx;
    text-align: center;
    margin-bottom: 10rpx;
    margin-top: 10px;
  }
  .pay-method {
    margin-top: 20px;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background-color: #ffffff;
    .pay-display {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .order-gou {
        color: #adb838;
        font-size: 50rpx;
        border-radius: 50%;
      }
      & > view:nth-child(1) {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        & > view:nth-child(2) {
          font-size: 40rpx;
          margin-left: 30rpx;
          font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
            sans-serif;
        }
      }
      .alipay {
        color: #1296db;
        font-size: 90rpx;
        margin: 20rpx 0;
      }
      .wxpay {
        color: #00ac1c;
        font-size: 80rpx;
        margin: 20rpx 0;
      }
    }
  }
}
</style>
